<template>
	<view class="pageItem">
		<view class="card">
			<view class="tab_item">
				<view class="tab" :class="tab_type == 'dataPack'?'tab_s':''" @click="typeChange('dataPack')">
					{{$t('use.data_package')}}</view>
				<view class="tab" :class="tab_type == 'server'?'tab_s':''" @click="typeChange('server')">
					{{$t('use.service_provider')}}</view>
			</view>
			<view class="row_item">
				<block v-if="tab_type == 'dataPack'">

					<view class="row" v-for="(item,index) in bag_list" :key="'d_'+index">

						<!-- 免费领取 -->
						<block v-if="item.id == 12">
							<view class="r_con">
								<image class="r_c_img" src="/static/img/data_pack.png" mode="widthFix"></image>
								<view class="r_c_msg">
									<view class="t1">{{show_name(item)}}{{$t('bean.data_package_txt')}}</view>
									<view class="t2">
										<!-- <image class="img" src="/static/other/bean.png" mode="widthFix"></image> -->
										<!-- <view class="num">{{item.gold}}</view> -->
										<!-- {{$t('use.bean')}} -->
									</view>
								</view>
								<view class="r_c_btn" @click="buy_bag(item.id)">{{$t('領取')}}</view>
							</view>
							<view class="c_tip">{{show_remark(item)}}</view>
						</block>

						<!-- 正常 -->
						<block v-else>
							<view class="r_con">
								<image class="r_c_img" src="/static/img/data_pack.png" mode="widthFix"></image>
								<view class="r_c_msg">
									<view class="t1">{{show_name(item)}}{{$t('bean.data_package_txt')}}</view>
									<view class="t2">
										<image class="img" src="/static/other/bean.png" mode="widthFix"></image>
										<view class="num">{{item.gold}}</view>
										{{$t('use.bean')}}
									</view>
								</view>
								<view class="r_c_btn" @click="buy_bag(item.id)">{{$t('use.buy')}}</view>
							</view>
							<view class="c_tip">{{show_remark(item)}}</view>
						</block>

					</view>



				</block>
				<block v-if="tab_type == 'server'">
					<view class="row" v-for="(item,index) in stat_list" :key="'s_'+index">
						<view class="r_con">
							<block v-if="index < 3">
								<image class="r_c_img" :src="'/static/img/star_'+(index+1)+'.png'" mode="widthFix">
								</image>
							</block>
							<block v-else>
								<image class="r_c_img" src="/static/img/star_more.png" mode="widthFix"></image>
							</block>
							<view class="r_c_msg">
								<view class="t1">{{show_name(item)}}{{$t('bean.service_provider_txt')}}</view>
								<view class="t2">
									<image class="img" src="/static/other/bean.png" mode="widthFix"></image>
									<view class="num">{{item.gold}}</view>
									{{$t('use.bean')}}
								</view>
							</view>
							<view class="r_c_btn" @click="buy_stat(item.id)">{{$t('use.buy')}}</view>
						</view>
						<view class="c_tip">{{show_remark(item)}}</view>
					</view>
				</block>
			</view>
		</view>
		<view class="bg_item"></view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import helper from '@/common/helper.js';
	export default {
		data() {
			return {
				tab_type: 'dataPack',
				bag_list: [],
				stat_list: [],
				dataPackArr: [{
					tier: 1,
					bean: '399'
				}, {
					tier: 2,
					bean: '399'
				}, {
					tier: 3,
					bean: '399'
				}],
				serverArr: [{
					tier: 1,
					bean: '399'
				}, {
					tier: 2,
					bean: '399'
				}, {
					tier: 3,
					bean: '399'
				}]
			};
		},
		onLoad() {
			this.initData();
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		methods: {
			show_name(item) {
				let lang = this.$i18n.locale;
				let tit = item.name;
				if (lang == 'en') {
					tit = item.name_en || tit;
				} else if (lang == 'jp') {
					tit = item.name_jp || tit;
				}
				return tit;
			},
			show_remark(item) {
				let lang = this.$i18n.locale;
				let tit = item.remark;
				if (lang == 'en') {
					tit = item.remark_en || tit;
				} else if (lang == 'jp') {
					tit = item.remark_jp || tit;
				}
				return tit;
			},
			initData() {
				let url = this.site_url + 'api/index/stat_list';
				this.areq(url).then(res => {
					if (res.code == 1) {
						this.bag_list = res.data.bag_list;
						this.stat_list = res.data.stat_list;
					}

				})

			},
			buy_bag(id) {
				if (!this.hasLogin) {
					this.showMsg(this.$t('system.tip4'));
					return false;
				}
				uni.$u.throttle(() => {
					this.real_buy_bag(id);
				}, 1800)
			},
			real_buy_bag(id) {
				uni.showLoading({
					mask: true
				});
				helper.Timer.start();

				let url = this.site_url + 'api/auth/play/buy_bag_handle?pvid=' + id;
				this.areq(url).then(res => {
					helper.Timer.stop();
					let left_time = helper.Timer.getLeftTime(2000);
					setTimeout(() => {
						uni.hideLoading();
						if (res.code == 1) {
							this.showMsg(this.$t('system.tip31'), 2000, true, 'success');
							uni.$emit('auto_update');
							setTimeout(() => {
								this.$r('/pages/my/my', 'rel');
							}, 1500)
						} else {
							this.showMsg(res.msg);
						}
					}, left_time);


				})


			},
			buy_stat(id) {
				if (!this.hasLogin) {
					this.showMsg(this.$t('system.tip4'));
					return false;
				}
				uni.$u.throttle(() => {
					this.real_buy_stat(id);
				}, 1800)
			},
			real_buy_stat(id) {
				uni.showLoading({
					mask: true
				});
				helper.Timer.start();

				let url = this.site_url + 'api/auth/play/buy_stat_handle?pvid=' + id;
				this.areq(url).then(res => {
					helper.Timer.stop();
					let left_time = helper.Timer.getLeftTime(2000);
					setTimeout(() => {
						uni.hideLoading();
						if (res.code == 1) {
							this.showMsg(this.$t('system.tip31'), 2000, true, 'success');
							uni.$emit('auto_update');
							setTimeout(() => {
								this.$r('/pages/my/my', 'rel');
							}, 1500)
						} else {
							this.showMsg(res.msg);
						}
					}, left_time);


				})


			},
			typeChange(_type) {
				this.tab_type = _type;
			}
		}
	}
</script>

<style lang="scss">
	.bg_item {
		@include bg_item(90vw);
	}

	.card {
		display: inline-block;
		margin-top: 6vw;
		padding: 11vw 4vw 4vw;
		background: #fff;
		position: relative;
		z-index: 2;
		width: 92%;
		margin-left: 4%;
		border-radius: 3vw;

		.tab_item {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			font-size: 4vw;
			color: #fff;
			display: flex;
			align-items: center;
			height: 11vw;
			border-radius: 2vw 2vw 0 0;

			.tab {
				flex: 1;
				height: 11vw;
				line-height: 11vw;
				text-align: center;
				background: $main_color;
				position: relative;
			}

			.tab:nth-child(1) {
				border-radius: 3vw 0 3vw 0;
			}

			.tab:nth-child(2) {
				border-radius: 0 3vw 0 3vw;
			}

			.tab_s {
				background: #fff;
				height: 14vw;
				margin-top: -3vw;
				padding-top: 1.5vw;
				border-radius: 2vw 2vw 0 0 !important;
				color: #222;
				font-weight: bold;
				position: relative;

				&::after {
					content: '';
					position: absolute;
					width: 6vw;
					height: 1vw;
					background: $main_color;
					border-radius: 0.3vw;
					bottom: 1vw;
					left: 50%;
					transform: translateX(-50%);
				}
			}
		}

		.row_item {
			width: 100%;

			.row {
				width: 100%;
				padding: 3vw;
				border-radius: 2vw;
				background: #FEF8F2;
				margin-top: 4vw;
				border: 1rpx solid #F4E1D6;

				.r_con {
					width: 100%;
					display: flex;
					align-items: center;

					.r_c_img {
						width: 10vw;
					}

					.r_c_msg {
						flex: 1;
						margin: 0 3vw;

						.t1 {
							font-size: 3.8vw;
							font-weight: bold;
						}

						.t2 {
							width: 100%;
							display: flex;
							align-items: center;
							font-size: 3vw;
							padding-top: 1vw;

							.img {
								width: 3vw;
							}

							.num {
								padding: 0 1vw;
							}
						}
					}

					.r_c_btn {
						font-size: 3.5vw;
						color: #fff;
						padding: 1.5vw 4vw;
						border-radius: 4vw;
						background: linear-gradient(90deg, #FC5E3A 0%, #FD3348 100%);
					}
				}

				.c_tip {
					width: 100%;
					padding-top: 2vw;
					margin-top: 2vw;
					border-top: 1rpx solid #F4E1D6;
					font-size: 2.8vw;
					color: #FD3348;
				}
			}
		}
	}
</style>